<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <!--
    angular的数组绑定主要有四种形式
    插值表达式 {{}}
    属性绑定[]将父组件中的值传递到子组件，比如下面的app-hero-detail标签中的selectedHero传值
    事件绑定()在html标签上绑定定义好的组件函数selectHero
    双向绑定[()]其实用了NgModel指令组合了值绑定和事件绑定
  -->
  <!--
    angular的模板是动态的，在angular渲染模板的时候会根据指令提供的操作对dom进行转换
    组件是一个待模板的指令，除此之外还有结构性指令和属性型指令
    比如夏目安的ngFor和ngIf就是两个内置的结构型指令
    ngFor循环heros中的每一个hero数据并为其创建一个li标签
    ngIf表示之后再选的selectedHero存在的情况下才包含hero-detail组件
  -->
<!--下面的li的click事件调用的是组件的selectHero，初始的时候犯了一个低级错误没有传递参数点击无效，
  这里有一个小的分步方法，先不用限制下面的应用编辑界面，我们先测试当前的click函数有没有响应我们的点击事件，在函数定义的位置有说明
-->
<li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="selectHero(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>    
</ul>
    <div *ngIf="selectedHero">
      <h2>{{selectedHero.name}} details!</h2>
      <div><label>id: </label>{{selectedHero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
      </div>
    </div>

<!-- <app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail> -->
